<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
	</head>
	<body>
		<div id="app">
			<input type="text" placeholder="姓名"  v-model="emp.name"/>
			<input type="text" placeholder="工资"  v-model="emp.salary"/>
			<input type="text" placeholder="工作"  v-model="emp.job"/>
			<el-button plain @click="add()">添加员工</el-button>
			<h1>员工列表</h1>
			<el-table
			      :data="arr"
			      style="width: 100%">
				  <el-table-column type="index" 
				    label="编号">
			      </el-table-column>
			      <el-table-column
			        prop="name"
			        label="姓名"
			        width="180">
				  </el-table-column>	
				  <el-table-column
					  prop="salary"
					  label="工资"
					  width="180">
			      </el-table-column>
			      <el-table-column
			        prop="job"
			        label="工作">
			      </el-table-column>
				  <el-table-column label="操作">
					    <!--scope里面装着当前行所对应的对象信息
					              scope.$index 得到当前行对应的对象在数组中的下标
					              scope.row 得到当前行对应的对象
					              -->
				        <template slot-scope="scope">
				          <el-button
				            size="mini"
				            type="danger"
				            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				        </template>
				  </el-table-column>
			</el-table>
		</div>
	</body>
	<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
	<script>
		let v=new Vue({
			el:'#app',
			data: function(){
				return {
					arr:[
						{name:"李白", salary:3000,job:"打野"},
						{name:"诸葛亮",salary:5000,job:"法师"},
						{name:"黄忠",salary:2000,job:"射手"}
					],
					emp: {name:"", salary:"", job:""}
				}
			},
			methods:{
				add(){
					v.arr.push({name:v.emp.name, salary: v.emp.salary,job:v.emp.job});
				},
				handleDelete(i,emp){
					v.$message("您成功删除了"+ emp.name);
					v.arr.splice(i,1);
				}
			}
		});
	</script>
</html>
